.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 根据需要设置列数 */
  gap: 10px; /* 网格项之间的间距 */
  padding: 0px;
  box-sizing: border-box;
}

.grid-item {
  border: 4px solid #bbb;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 16px;
  /* background-color: #000; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  position: relative;
  background: #000;
  background: radial-gradient(circle, rgba(0,0,0,0.7) 1%, rgba(0,0,0,1) 150%);
  /* background:  linear-gradient(to right, rgba(0,0,0,0.9),rgba(0,0,0,0.6),rgba(0,0,0,0.9));; */
}

.item-content{
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  flex:1;
  height: 100%;
  color:#fff;
  padding-top: 12%;
  padding-bottom: 3%;
  box-sizing: border-box;
}

.status{
  background-color: #fff;
  border-radius: 16px;
  color:#000;
  padding:3px 10px;
}
.finish{
  background-color: rgba(87, 228, 87, 0.711);
  color:#fff
}
.check{
  background-color: rgba(231, 250, 67, 0.711);
  color:#fff
}
.grid-item:hover {
  background-color: #e0f7fa; /* 鼠标悬停时的背景颜色 */
}

.item-content {
  text-align: center;
}
.even{
  margin-top: 5px;
}

.rowLine{
  position: absolute;
  left:0;
  top:20px;
  width:100%;
  height:4px;
  background-color: #bbb;
}
.columnLine{
  position: absolute;
  left:20px;
  top:0;
  width:4px;
  height:100%;
  background-color: #bbb;
}
.Circle{
  width:10px;
  height:10px;
  border-radius: 10px;
  position: absolute;
  background-color: #bbb;
}
.rowLine_leftCircle{
  left:-3px;
  top:-3px
}
.rowLine_rightCircle{
  right:-3px;
  top:-3px;
}
.columnLine_topCircle{
  top:-4px;
  left:-3px
}
.columnLine_bottomCircle{
  bottom:-4px;
  left:-3px;
}

